<template>
  <div class="all_star">
    <div class="title_box dis-o-between">
      每日上报案卷统计
      <el-radio-group v-model="caseRadio" size="mini">
        <el-radio-button v-for="item in caseType" :key="item" :label="item"></el-radio-button>
      </el-radio-group>
    </div>
    <div class="echart_work"></div>
  </div>
</template>

<script>
import { EleResize } from '@/assets/utils/EleResize.js';
const CASE_TYPE = ["最近7日", "最近30日"];
export default {
  name: 'moduleTwo',
  data() {
    return {
      caseType: CASE_TYPE,
      caseRadio: CASE_TYPE[0],
      boardCountList: { closeVoList: [], createVoList: [] },
      charts: null,
      chartTitle: ["当日上报案卷数", "当日关闭案卷数"],
      chartTitle1: ["当日上报病害损坏面积（㎡）", "当日已修复面积（㎡）"],
    };
  },
  props: {},

  components: {},

  created() { },

  mounted() {
    this.initReq(1);
  },

  beforeDestroy() { },

  methods: {
    initReq(num) {
      const week = {
        "code": 0,
        "data": {
          "dealingVoList": [
            {
              "date": "2024-06-22",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-23",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-24",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-25",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-26",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-27",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-28",
              "count": 0,
              "key": "dealing"
            }
          ],
          "createVoList": [
            {
              "date": "2024-06-22",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-23",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-24",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-25",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-26",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-27",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-28",
              "count": 0,
              "key": "create"
            }
          ],
          "closeVoList": [
            {
              "date": "2024-06-22",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-23",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-24",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-25",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-26",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-27",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-28",
              "count": 0,
              "key": "close"
            }
          ]
        },
        "msg": ""
      }
      const mounth = {
        "code": 0,
        "data": {
          "dealingVoList": [
            {
              "date": "2024-05-30",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-05-31",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-01",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-02",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-03",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-04",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-05",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-06",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-07",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-08",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-09",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-10",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-11",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-12",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-13",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-14",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-15",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-16",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-17",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-18",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-19",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-20",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-21",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-22",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-23",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-24",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-25",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-26",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-27",
              "count": 0,
              "key": "dealing"
            },
            {
              "date": "2024-06-28",
              "count": 0,
              "key": "dealing"
            }
          ],
          "createVoList": [
            {
              "date": "2024-05-30",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-05-31",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-01",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-02",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-03",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-04",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-05",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-06",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-07",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-08",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-09",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-10",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-11",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-12",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-13",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-14",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-15",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-16",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-17",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-18",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-19",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-20",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-21",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-22",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-23",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-24",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-25",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-26",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-27",
              "count": 0,
              "key": "create"
            },
            {
              "date": "2024-06-28",
              "count": 0,
              "key": "create"
            }
          ],
          "closeVoList": [
            {
              "date": "2024-05-30",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-05-31",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-01",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-02",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-03",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-04",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-05",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-06",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-07",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-08",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-09",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-10",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-11",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-12",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-13",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-14",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-15",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-16",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-17",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-18",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-19",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-20",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-21",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-22",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-23",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-24",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-25",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-26",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-27",
              "count": 0,
              "key": "close"
            },
            {
              "date": "2024-06-28",
              "count": 0,
              "key": "close"
            }
          ]
        },
        "msg": ""
      }
      let XData = [], YData1 = [], YData2 = []
      if (num == 1) {
        week.data.dealingVoList.map((item, index) => {
          XData.push(item.date)
          YData1.push(week.data.createVoList[index].count)
          YData2.push(week.data.closeVoList[index].count)
        })
      } else {
        mounth.data.dealingVoList.map((item, index) => {
          XData.push(item.date)
          YData1.push(mounth.data.createVoList[index].count)
          YData2.push(mounth.data.closeVoList[index].count)
        })
      }
      // console.log(XData, YData1, YData2);
      this.ChartWork(XData, YData1, YData2);
    },
    ChartWork(XData, YData1, YData2) {
      this.charts = this.$echarts.init(document.querySelector(".echart_work"));
      let dom = document.querySelector(".echart_work");
      if (dom) {
        EleResize.on(dom, this.charts.resize);//自适应屏幕
        this.charts.setOption({
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
            },
            padding: [5, 10],
          },
          legend: {
            x: 'left',//水平安放位置,默认为全图居中,
            y: 'top',// 垂直安放位置，默认为全图顶端，
            icon: 'rect',
            itemHeight: 2,
            itemWidth: 12,
            data: this.chartTitle,
          },
          grid: {
            left: 10,
            right: 10,
            bottom: 20,
            top: 50,
            containLabel: true
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              axisTick: { show: false },
              data: XData,
              axisLabel: {
                show: true,
                color: "#999",
                // fontSize: 12,
                interval: 0,
                rotate: 45 // 设置标签旋转角度为45度
              },
              axisLine: {//不显示坐标轴线
                show: false,
              },
            }
          ],
          yAxis: [
            {},
          ],
          series: [
            {
              name: this.chartTitle[0],
              type: "line",
              smooth: true, // 设置折线为圆滑曲线
              showSymbol: false,
              data: YData1,
              color: "#0066FF",
              lineStyle: {
                color: "#0066FF",
                width: 2,
              },
              animationDuration: 2800,
              animationEasing: "cubicInOut",

            },
            {
              name: this.chartTitle[1],
              type: "line",
              showSymbol: false,
              data: YData2,
              color: "#19BE6B",
              lineStyle: {
                color: "#19BE6B",
                width: 2,
              },
              animationDuration: 2800,
              animationEasing: "quadraticOut",
            },
          ]
        })
      }
    },
  },

  computed: {},

  watch: {
    caseRadio(newData, oldData) {
      // this.charts.dispose();
      if (newData === CASE_TYPE[0]) {
        this.initReq(1);
      } else {
        this.initReq(2);
      }
    }
  },

  directives: {},

  filters: {}
};
</script>

<style scoped lang="scss">
.all_star {

  .title_box {
    position: relative;
    font-weight: bold;
    padding: 0 30px;
    height: 45px;
    line-height: 45px;
    background: #f7f8fa;
  }

  .title_box::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    height: 14px;
    width: 3px;
    background: #0066ff;
  }

  .echart_work {
    background: #fff;
    box-sizing: border-box;
    padding: 16px 16px 0;
    width: 100%;
    height: 350px;
  }
}
</style>
